<script lang="ts" setup></script>

<template>

  <div>
    <h1>关于内容部分</h1>
    <div class="conner-layout">
      <div class="pie-big"></div>
      <div class="pie-samll"></div> 
    </div>
  </div>

</template>

<style scoped lang="scss">
.conner-layout {
  margin: 10px auto;
  width: 300px;
  height: 300px;
  background-color: #FE6749;
  border-radius: 50%;
  position: relative;
  transform: rotateY(180deg) rotateZ(90deg);
  background: conic-gradient(#333 0 15deg, #FE6749 0deg 30deg);
  .pie-big {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 30px solid #FFAD61;
  }
  .pie-samll {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    border-radius: 50%;
    border: 30px solid #FFD58C;
    background-color: #FFD58C;
  }
}
</style>